<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${content.title} - ${site.seoTitle} - Powered by JPROCMS</title>
  <meta name="keywords" content="${content.keywords!site.seoKey}">
  <meta name="description" content="${content.description!site.seoDesc}">
  [#include '../includes/common_res.html'/]
  <!--数学公式展示用--->
  [#if config.grade>0]
  <link rel="stylesheet" href="${resource}/static/plugins/katex/0.15.6/katex.min.css" >
  <script defer src="${resource}/static/plugins/katex/0.15.6/katex.min.js" ></script>
  <script defer src="${resource}/static/plugins/katex/0.15.6/auto-render.min.js" ></script>
  <script>
      document.addEventListener("DOMContentLoaded", function() {
          renderMathInElement(document.body, {
            // customised options
            // • auto-render specific keys, e.g.:
            delimiters: [
              // 意思是匹配页面上 以$开头和结尾的元素。 display决定是否占一整行
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false}
            ],
            // • rendering keys, e.g.:
            throwOnError : true
          });
      });
  </script>
  [/#if]
 <style>
    .content-detail img{
      max-width: 100%;
    }
    .content-detail video{
      max-width: 100%;
    }
    .hidden{
      display: none;
    }
  </style>
</head>
<body>
[#if config.grade>1&&!dynamic]
  <!--# include file="/${site.sitePathPrefix}/includes/header.html" -->
[#else]
  [#include '../includes/header.html'/]
[/#if]
<div class="bg-gray-50">
  <div class="container">
    <!--导航面包屑-->
    <nav class="row nav-breadcrumb" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        [#list channel.nodeList as c]
          <li class="list-inline-item">></li>
          <li class="list-inline-item">[@ZUrl object=c/]</li> 
        [/#list]
      </ol>
    </nav>
  </div>
</div>
<div class="container mt-4">
  <div class="row">
    <div class="col-lg-8">
      <h3 class="cms-detail-title">${content.title}</h3>
      [#if content.tags?size gt 0]
      <div class="mt-2">
        [#list content.tags as tag]
        <a href="${base}/tag/${tag.id}" class="ml-1"><span class="badge badge-secondary">${tag.tagName!}</span></a>
        [/#list]
      </div>
      [/#if]
      <div class="mt-2 pb-2 border-bottom small text-muted">
        <span>${ZFormat(content.releaseTime, 'yyyy-MM-dd HH:mm:ss')}</span>
        [#if content.source??]<span class="ml-2">${content.source}</span>[/#if]
        [#if content.author??]<span class="ml-2">${content.author}</span>[/#if]
        <i class="ml-2 far fa-eye"></i> <span id="views"></span>
        <script>
          //检查访问权限
          axios.get('${api}/channel/hasChannelPermission?channelId=${content.channelId?c}').then(function (response) {
            //没有权限
            if(response.data.code==0&&!response.data.data){
              showError("您没有权限访问该内容!");
              location.href="${base}/"
            }
          });
          axios.get('${api}/content/view/${content.id?c}').then(function (response) {
            $('#views').text(response.data.data);
          });
        </script>
      </div>
      [#if content.sysVideo??]
        <div class="mt-4">
          <video style="max-width:100%;" controls>
            <source src="${content.sysVideo}" type="video/mp4">
            您的浏览器不支持视频(Video)标签。
          </video>
        </div>
      [/#if]
      [#if content.sysAudio??]
        <div class="mt-4">
          <audio style="width:100%;" controls>
            <source src="${content.sysAudio}">
            您的浏览器不支持音频(Audio)标签
          </audio>
        </div>
      [/#if]
      [#if content.images?size > 0]
        <div class="pt-2">
          [#list content.images as image]
            <figure class="figure mt-3">
              <img src="${image.url}" class="figure-img img-fluid gallery-img" [#if image.description??] alt="${image.description}" [/#if]>
              <figcaption><span class="mr-2"><strong>${image_index+1}</strong>/${content.images?size}</span>[#if image.description??] ${image.description} [/#if] </figcaption>
            </figure>
          [/#list]
        </div>
      [/#if]
      <div class="mt-4 content-detail">
        [#if site.confuseContent]
        <p class="hidden" id="hiddenP"></p>
        [/#if]
        [#noescape]${content.text!}[/#noescape] 
      </div>
      [#if content.attachs?size > 0]
        <div class="mt-4 bg-light">附件下载</div>
        <ul class="mt-2 list-unstyled small">
          [#list content.attachs as attach]
            <li><i class="fas fa-download text-primary"></i> <a class="cms-detail-download">${attach.name}</a></li>
          [/#list]
        </ul>
        <script>
          axios.get('${api}/content/download-getkey/${content.id?c}').then(function (response) {
            $('.cms-detail-download').each(function (index, element) {
              $(element).attr('href', '${base}/download/${content.id?c}/' + index + '?' + response.data.data)
            });
          })
        </script>
      [/#if]    
      <div class="lead d-flex justify-content-center text-info">
        <div class="cms-pointer" onclick="contentUp()"><i class="far fa-thumbs-up"></i> <span id="ups"></span></div>
        <div class="cms-pointer ml-4" onclick="contentDown()"><i class="far fa-thumbs-down"></i> <span id="downs"></span></div>
      </div>
      <script>
        function contentUp() {
          axios.post('${api}/content/up/${content.id?c}').then(function (response) {
            if (response.data.data <= 0) {
              alert("您已经点赞过了！");
              return;
            }
            $('#ups').text(response.data.data);
          });
        }

        function contentDown() {
          axios.post('${api}/content/down/${content.id?c}').then(function (response) {
            if (response.data.data <= 0) {
              alert("您已经踩过了！");
              return;
            }
            $('#downs').text(response.data.data);
          });
        }

        axios.get('${api}/content/count/${content.id?c}').then(function (response) {
          $('#ups').text(response.data.data.ups);
          $('#downs').text(response.data.data.downs);
        });
      </script>

      [#if site.commentEnable]
      <div class="mt-2 float-right">
        ${content.comments} 评论
      </div>
      <form
        id="validForm"
        action="${api}/comment"
        method="post"
      >
        <div class="input-group">
          <textarea class="form-control" aria-label="With textarea" name="text"></textarea>
          <input type="hidden" name="contentId" value="${content.id}"/>
          <button type="submit" id="commentSubmit" class="btn btn-primary">
            发表评论
          </button>
        </div>
      </form>
      <div class="mt-2 mb-2 clearfix">
        [@ZCommentList contentId=content.id count='5'; comments]
            [#list comments as c]
            <div class="clearfix mt-2">
              <span class="float-left ">${ZSubstring(c.text,150,'...')}</span>
              <span class="float-right">${ZFormat(c.createTime, 'yyyy-MM-dd')}</span>
            </div>
            [#if c.replyText??]
            <div class="clearfix mt-2">
              <span class="float-left ">回复:${ZSubstring(c.replyText,150,'...')}</span>
              <span class="float-right">${ZFormat(c.replyTime, 'yyyy-MM-dd')}</span>
            </div>
            [/#if]
            [/#list]
        [/@ZCommentList]    
      </div>
      [/#if]

      <ul class="mt-4 list-unstyled">
        [@ZContentSide id=content.id releaseTime=content.releaseTime topLevel=content.topLevel channelId=content.channelId next=false; c]
          <li class="text-truncate mt-2">
            <strong>上一篇：</strong>[#if c??][@ZUrl object=c class="common-link"/][#else]没有了[/#if]
          </li>
        [/@ZContentSide]
        [@ZContentSide id=content.id releaseTime=content.releaseTime topLevel=content.topLevel channelId=content.channelId next=true; c]
          <li class="text-truncate mt-2">
            <strong>下一篇：</strong>[#if c??][@ZUrl object=c class="common-link"/][#else]没有了[/#if]
          </li>
        [/@ZContentSide]
      </ul>

      [@ZContentRelateList contentId=content.id count='5'; list]
      [#if list?size gt 0]
        <h5 class="mt-4 border-bottom"><span class="common-block-head-bottom">相关新闻</span></h5>
        <ul class="list-unstyled mt-3">
          [#list list as c]
            <li class="text-truncate mt-2">[@ZUrl object=c class="common-link"/]</li>
          [/#list]
        </ul>
      [/#if]
      [/@ZContentRelateList]
    </div>
    [#include '../includes/inc_content_right.html'/]
  </div>
</div>
[#if config.grade>1&&!dynamic]
    <!--# include file="/${site.sitePathPrefix}/includes/footer.html" -->
[#else]
    [#include '../includes/footer.html'/]
[/#if]
[#include '../includes/inc_msg.html'/]
<script>
  $(function () {
    $("#validForm").validate({
      submitHandler: function (form) {
        event.preventDefault();
        const formData = $(form).serializeJSON();
        const token = sessionStorage.getItem("accessToken");
        axios
          .post(form.action, formData, {
            headers: {
              "Tenant-Id": Cms.getTenantId(),
              Authorization: "Bearer " + token,
            },
          })
          .then(function (response) {
            console.log(response.data)
            if (response.data.code === 0) {
              successTip("评论成功！");
              location.href = "${content.url}";
            }else{
              alertTip(response.data.msg);
              // location.href = "${content.url}";
            }
          });
      },
    });
    [#if site.preventCopy]
      document.addEventListener('contextmenu', function(e) {
          e.preventDefault();
      });
      document.addEventListener('keydown', function(e) {
          if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'x')) {
              e.preventDefault();
          }
      });
    [/#if]
    [#if site.confuseContent]
      $("#hiddenP").html(Cms.generateRandomString(Cms.getRandomInt(50,200)))
    [/#if]
  });
</script>
</body>
</html>
[/#escape]
